<template>
  <div id="index">
    <div class="mainbg">
      <!-- 顶部轮播组件 -->
      <Carousel :carouselItems="carousel" />

      <!-- 就业班课程组件展示 -->
      <circelCard v-for="series in serieslesson" :key="series._id"
        :title="series.maxtitle"
        :imgURL="series.fist_img_url"
        :itemList="series.items"
      />
      <!-- 面授同步课组件展示 -->
      <rectCard  v-for="course in facetofacelesson" :key="course._id" :courseInfo="course"/>

      <div style="height:50px"></div>
    </div>
  </div>
</template>

<script>
//轮播组件导入
import Carousel from "../components/Carousel/Carousel";
// 就业班课程 圆角卡片组件
import circelCard from "../components/Cards/circleCard/circleCard";
//面授同步课 矩形卡片组件
import rectCard from "../components/Cards/rectCard/rectCard";

//导入vuex 的actions,state
import {mapActions,mapState} from 'vuex'

export default {
  name: "index",
  //组件注册
  components: {
    Carousel,
    circelCard,
    rectCard
  },
  data() {
    return {
      
    };
  },
  //从vuex内部获取数据
  computed: mapState({
    carousel(state){
      return state.carousel;
    },
    serieslesson(state){
      return state.serieslesson;
    },
    facetofacelesson(state){
      return state.facetofacelesson;
    }
  }),

  watch: {},

  methods: {
    //注册actions函数 所有的组件数据通过这个通用函数获取
    ...mapActions(['reqServerData'])
  },

  created() {},

  mounted() {
    //获取轮播数据
    this.reqServerData({
      method:'get',   //获取的方式get/post
      methodName:'Carousel',    //获取的函数名
      param:[]        //参数列表数组为空没有参数
    })
    //获取就业班课程
    this.reqServerData({
      method:'get',
      methodName:'Serieslesson',
      param:[]
    })
    //请求面授同步课
    this.reqServerData({
      method:'get',
      methodName:'Facetofacelesson',
      param:[]
    })

  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
/* 引入基础CSS */
@import "../../static/base.css";
</style>